<template>
  <el-form
    :inline="true"
    :model="activityQuery"
    class="demo-form-inline"
    :rules="activityRules"
  >
    <el-form-item label="负责人">
      <el-select
        v-model="activityQuery.ownerId"
        placeholder="请选择负责人"
        @click="loadOwner"
        clearable
      >
        <el-option
          v-for="item in ownerOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="活动名称">
      <el-input
        v-model="activityQuery.name"
        placeholder="请输入活动名称"
        clearable
      />
    </el-form-item>

    <el-form-item label="活动时间">
      <el-date-picker
        v-model="activityQuery.activityTime"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>
    <el-form-item label="活动预算" prop="cost">
      <el-input
        v-model="activityQuery.cost"
        placeholder="请输入活动预算"
        clearable
      />
    </el-form-item>
    <el-form-item label="创建时间">
      <el-date-picker
        v-model="activityQuery.createTime"
        type="datetime"
        placeholder="请选择创键时间"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSearch">搜索</el-button>
      <el-button type="primary" plain @click="onReset">重置</el-button>
    </el-form-item>
  </el-form>

  <el-button type="primary" @click="add">录入市场活动</el-button>
  <el-button type="danger" @click="batchDel">批量删除</el-button>
  <el-table
    :data="activityList"
    row-key="id"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column type="index" label="序号" width="60" />
    <!-- <template #default="scope">{{ scope.row.date }}</template> -->
    <el-table-column property="ownerDO.name" label="负责人" width="120" />
    <el-table-column
      property="name"
      width="150"
      label="活动名称"
      show-overflow-tooltip
    />
    <el-table-column
      property="startTime"
      width="170"
      label="开始时间"
      show-overflow-tooltip
    />
    <el-table-column
      property="endTime"
      label="结束时间"
      show-overflow-tooltip
    />
    <el-table-column property="cost" label="活动预算" show-overflow-tooltip />
    <el-table-column
      property="createTime"
      label="创键时间"
      show-overflow-tooltip
    />

    <el-table-column label="操作" width="230" show-overflow-tooltip>
      <template #default="scope">
        <!-- 插槽 拿到当前行数据  scope.row相当于userList的user-->
        <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
        <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="pageSize"
    @prev-click="toPage"
    @next-click="toPage"
    @current-change="toPage"
  />
</template>
<script>
import { reactive, ref, onMounted } from "vue";
import { doGet, doDelete } from "@/http/httpRequest";
import router from "@/router/router";
import { messageTip, messageConfirm } from "@/util/util";
export default {
  props: ["reload"],
  setup(props) {
    const activityQuery = reactive({});
    const activityList = reactive([{ ownerDO: {} }]);
    let total = ref(0);
    let pageSize = ref(0);
    let ownerOptions = ref([]); // 改为使用 ref
    let activityIdArray = ref([]);
    onMounted(() => {
      getData();
    });
    function getData(current) {
      let startTime = "";
      let endTime = "";
      for (let key in activityQuery.activityTime) {
        if (key === "0") {
          startTime = activityQuery.activityTime[key];
        }
        if (key === "1") {
          endTime = activityQuery.activityTime[key];
        }
      }
      doGet("/api/activities", {
        current: current,
        ownerId: activityQuery.ownerId,
        name: activityQuery.name,
        startTime: startTime,
        endTime: endTime,
        cost: activityQuery.cost,
        createTime: activityQuery.createTime,
      }).then((resp) => {
        if (resp.data.code === 200) {
          Object.assign(activityList, resp.data.data.list);
          activityList.length = resp.data.data.list.length;
          pageSize.value = resp.data.data.pageSize;
          total.value = resp.data.data.total;
        }
      });
    }
    //current是element组件传过来的
    function toPage(current) {
      getData(current);
    }
    function loadOwner() {
      doGet("/api/owners").then((resp) => {
        if (resp.data.code === 200) {
          ownerOptions.value = resp.data.data;
        }
      });
    }
    let activityRules = {
      cost: [
        { required: true, message: "请输入姓名", trigger: "blur" },
        {
          pattern: /^(?:[1-9]\d*|0)(?:\.\d{1,2})?$/,
          message: "必须是整数或者两位小数",
          trigger: "blur",
        },
      ],
    };
    function onSearch() {
      getData(1);
    }
    function add() {
      router.push("/dashboard/activity/add");
    }
    function onReset() {
      Object.keys(activityQuery).forEach((key) => {
        delete activityQuery[key];
      });
    }
    function edit(id) {
      router.push("/dashboard/activity/edit/" + id);
    }
    function view(id) {
      router.push("/dashboard/activity/" + id);
    }
    function del(id) {
      messageConfirm("你确定要删除?")
        .then(() => {
          doDelete("/api/activity/" + id, {}).then((resp) => {
            if (resp.data.code === 200) {
              messageTip("删除成功", "success");
              props.reload();
            } else {
              console.log(resp.data);
              messageTip("删除失败,原因：" + resp.data.msg, "error");
            }
          });
        })
        .catch(() => {
          messageTip("取消删除", "warning");
        });
    }
    function handleSelectionChange(selectionDataArray) {
      activityIdArray.value = [];
      selectionDataArray.forEach((data) => {
        activityIdArray.value.push(data.id);
      });
    }
    function batchDel() {
      if (activityIdArray.value.length < 0) {
        messageTip("请选择要删除的数据", "warning");
        return;
      }
      messageConfirm("你确定要删除?")
        .then(() => {
          let ids = activityIdArray.value.join(",");
          doDelete("/api/activities", { ids: ids }).then((resp) => {
            if (resp.data.code === 200) {
              messageTip("批量删除成功", "success");
              props.reload();
            } else {
              console.log(resp.data);
              messageTip("批量删除失败,原因：" + resp.data.msg, "error");
            }
          });
        })
        .catch(() => {
          messageTip("取消批量删除", "warning");
        });
    }
    return {
      batchDel,
      del,
      edit,
      onReset,
      onSearch,
      handleSelectionChange,
      activityRules,
      activityQuery,
      activityList,
      pageSize,
      toPage,
      loadOwner,
      ownerOptions,
      add,
      view,
      total,
    };
  },
};
</script>
<style>
.demo-form-inline .el-input {
  --el-input-width: 170px;
}

.demo-form-inline .el-select {
  --el-select-width: 170px;
}
.el-pagination {
  margin-top: 20px;
}
.el-form {
  margin-bottom: 18spx;
}
</style>

